<template>
  <el-dialog :title="runData.title" :visible.sync="runData.show" width="900px">
    <el-form label-width="130px" ref="runData">
      <el-form-item label="推广位:" prop="type" v-loading="loading">
        <el-checkbox-group v-model="moduleIds">
          <el-checkbox
            :label="item.key"
            border
            :checked="item.selected"
            v-for="item in modules"
            :key="item.key"
          >{{item.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="reSet">重置</el-button>
      <el-button type="primary" @click="handleSend">保存</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      modules: [],
      moduleIds: []
    };
  },
  props: ["runData"],
  methods: {
    handleClose() {
      this.runData.show = false;
    },
    reSet () {
        this.moduleIds = []
        this.modules.forEach(el=>{
            this.moduleIds.push(el.key)
        })
    },
    render() {
      this.loading = true;
      this.$axios
        .post("/tx/product/global_running/modules", {
          productId: this.runData.id
        })
        .then(res => {
          if (res.code === 10200) {
            this.modules = res.data;
          }
          setTimeout(() => {
            this.loading = false;
          }, 200);
        });
    },
    resetData() {
      this.modules = [];
      this.moduleIds = [];
    },
    handleSend() {
      this.$axios
        .post("/tx/product/global_running/update/modules", {
           productId: this.runData.id,
           moduleIds: this.moduleIds.join(',')
        })
        .then(res => {
          if (res.code === 10200) {
            this.$message({
              message: "操作成功！",
              type: "success"
            });
            setTimeout(() => {
              this.handleClose();
            }, 200);
          }
        });
    }
  },
  computed: {
    changeDialog() {
      return this.runData.show;
    }
  },
  watch: {
    changeDialog(culval) {
      if (culval) {
        this.render();
      } else {
        this.resetData();
      }
    }
  }
};
</script>
<style>
</style>
